<template>
    <div class="box">
        <!-- 顶部操作区域，包含添加按钮 -->
        <div class="header">
            <!-- 点击按钮调用openDialog方法，打开添加弹窗 -->
            <el-button type="primary" :icon="Plus" solid @click="openDialog"> 添加网红小店</el-button>
        </div>

        <!-- 表格内容区域，展示网红小店列表 -->
        <div class="content">
            <!-- Element Plus表格组件，绑定tableData数据源 -->
            <el-table :data="tableData" border style="width: 100%;">
                <!-- 店铺名称列，绑定数据中的name字段 -->
                <el-table-column prop="name" label="名字" width="180" />
                <!-- 店铺地址列，绑定数据中的address字段 -->
                <el-table-column prop="address" label="地址" />
                <!-- 小店图片列，自定义渲染图片 -->
                <el-table-column prop="url" label="小店图片">
                    <!-- 作用域插槽，获取当前行数据scope.row -->
                    <template #default="scope">
                        <!-- 显示图片数组的第一张图片 -->
                        <img class="whxd-img" :src="scope.row.url[0]" alt="">
                    </template>
                </el-table-column>
                <!-- 小店标签列，循环渲染标签数组 -->
                <el-table-column prop="label" label="小店标签">
                    <template #default="scope">
                        <!-- 遍历当前行的label数组，渲染多个标签 -->
                        <el-tag v-for="(item, index) in scope.row.label" :key="index" type="warning">{{ item }}</el-tag>
                    </template>
                </el-table-column>
                <!-- 营业时间列，绑定数据中的businessHours字段 -->
                <el-table-column prop="businessHours" label="营业时间" />
                <!-- 操作列，包含修改和删除按钮 -->
                <el-table-column prop="label" label="操作">
                    <template #default="scope">
                        <el-button type="success" :icon="Edit" @click="openDialog('edit', scope.row)">修改</el-button>
                        <el-button type="danger" :icon="Delete" @click="deleteItem(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 添加网红小店的弹窗，v-model绑定whxdVisible控制显示/隐藏 -->
        <el-dialog v-model="whxdVisible" :title="dialogType === 'add' ? '添加网红小店' : '编辑网红小店'" width="500" center>
            <!-- 表单组件，绑定ruleForm数据模型 -->
            <el-form ref="ruleFormRef" style="max-width: 600px " :model="ruleForm" label-width="auto">
                <!-- 小店名称输入项 -->
                <el-form-item label="小店名称" prop="name">
                    <el-input v-model="ruleForm.name" />
                </el-form-item>
                <!-- 店铺地址输入项（多行文本） -->
                <el-form-item label="店铺地址" prop="address">
                    <el-input v-model="ruleForm.address" type="textarea" />
                </el-form-item>
                <!-- 营业时间选择项（开始+结束时间） -->
                <el-form-item label="营业时间" prop="businessHours">
                    <el-time-select v-model="ruleForm.starTime" style="width: 140px" max-time="ruleForm.endTime"
                        placeholder="开始时间" start="00:00" step="00:30" end="23:59" />
                    <el-time-select v-model="ruleForm.endTime" style="width: 140px" min-time="ruleForm.starTime"
                        placeholder="结束时间" start="00:00" step="00:30" end="23:59" />
                </el-form-item>
                <!-- 店铺标签输入项 -->
                <el-form-item label="店铺标签" prop="label">
                    <el-input v-model="ruleForm.label" placeholder="请输入标签" aria-label="请输入后敲击回车" />
                </el-form-item>
                <!-- 店铺介绍输入项（多行文本） -->
                <el-form-item label="店铺介绍" prop="remark">
                    <el-input v-model="ruleForm.remark" type="textarea" />
                </el-form-item>
                <!-- 表单操作按钮（保存和取消） -->
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        保存
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script setup>
// 导入Element Plus图标（编辑、加号、删除）
import { Edit, Plus, Delete } from "@element-plus/icons-vue";
// 导入本地数据（模拟的网红小店数据）
import data from "@/utils/data";
// 导入Vue的响应式API和生命周期钩子
import { ref, onMounted } from "vue";

// 表格数据源（响应式对象），初始值为导入的模拟数据
const tableData = ref(data);
// 打印数据源到控制台（调试用）
console.log(data, 'data');

// 控制弹窗显示/隐藏的响应式变量（默认隐藏）
const whxdVisible = ref(false);

// 表单实例的引用（用于表单验证、重置等操作）
const ruleFormRef = ref()
const dialogType = ref('add')
const whxdId = ref(null)
console.log('releFormRef',ruleFormRef.value);

// 表单数据模型（响应式对象），存储表单输入的各项数据
const ruleForm = ref({
    name: '',          // 小店名称
    address: '',       // 店铺地址
    starTime: '',      // 营业开始时间
    endTime: '',       // 营业结束时间
    urlList: [],       // 店铺图片列表（暂未使用）
    label: [],         // 店铺标签数组
})

// 打开弹窗的方法：将whxdVisible设为true
const openDialog = (type, row) => {
    ruleForm.value = {
        name: '',          // 小店名称
        address: '',       // 店铺地址
        starTime: '',      // 营业开始时间
        endTime: '',       // 营业结束时间
        urlList: [],       // 店铺图片列表（暂未使用）
        label: [],
    }

    whxdVisible.value = true;
    console.log(type);
    console.log(row);
    if (type == 'edit') {
        dialogType.value = 'edit'
        ruleForm.value ={...row}
        ruleForm.value.starTime = row.businessHours.split('-')[0]
        ruleForm.value.endTime = row.businessHours.split('-')[1]
        whxdId.value=row.id
    } else {
        dialogType.value = 'add'
        whxdId.value=null
    }

}
// 组件挂载完成后执行的生命周期钩子
onMounted(() => {
    // 从localStorage中获取保存的网红小店数据
    const savadData = localStorage.getItem('whxdData')
    // 如果有保存的数据，则使用保存的数据；否则使用默认模拟数据
    if (savadData) {
        tableData.value = JSON.parse(savadData)
    } else {
        tableData.value = data
    }
}
)

// 删除店铺的方法：接收索引参数，从表格数据中删除对应项并更新localStorage
const deleteItem = (index) => {
    tableData.value.splice(index, 1)
    localStorage.setItem('whxdData', JSON.stringify(tableData.value))
}

// 表单提交方法：接收表单实例，执行表单验证和数据提交逻辑
const submitForm = async (formEl) => {
    // 如果没有表单实例，直接返回
    if (!formEl) return

    // 调用表单验证方法
    await formEl.validate((valid, fields) => {
        // 验证通过
        if (valid) {
            console.log('submit');
            console.log(ruleForm.value);  // 打印表单数据（调试用）

            // 计算新数据的id（取现有最大id+1，确保唯一性）
            const maxId = tableData.value.length > 0
                ? Math.max(...tableData.value.map(item => item.id || 0))
                : 0
            if (whxdId.value) {
                const index = tableData.value.findIndex(item => item.id === whxdId.value)
                console.log(index)
                tableData.value[index] = {
                    id: whxdId.value,
                    name: ruleForm.value.name,
                    address: ruleForm.value.address,
                    businessHours: `${ruleForm.value.starTime || ''}-${ruleForm.value.endTime || ''}`,
                    url: ruleForm.value.url || [],
                    label: ruleForm.value.label || [],
                }
            }else{
                tableData.value.push ({
                id: maxId + 1,
                name: ruleForm.value.name,
                address: ruleForm.value.address,
                businessHours: `${ruleForm.value.starTime || ''}-${ruleForm.value.endTime || ''}`,
                url: ruleForm.value.urlList || [],
                label: ruleForm.value.label || [],
                remark: ruleForm.value.remark || ''
            })
            }
            // 将新数据添加到表格数据源
            localStorage.setItem('whxdData', JSON.stringify(tableData.value))

            // 重置表单数据
            ruleForm.value = {
                name: '',
                address: '',
                starTime: '',
                endTime: '',
                urlList: [],
                label: [],
            }
            // 关闭弹窗
            whxdVisible.value = false
        } else {
            // 验证失败，打印错误信息
            console.log('error submint!', fields);

        }
    })
}
</script>
<style scoped lang="scss">
// 根容器样式
.box {
    padding: 20px;

    // 顶部操作区样式（按钮靠右对齐）
    .header {
        display: flex;
        justify-content: flex-end;
    }

    // 表格内容区样式
    .content {
        margin-top: 20px;

        // 店铺图片样式（固定宽高）
        .whxd-img {
            height: 100px;
            width: 100px;
        }
    }
}
</style>